import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/compents/contrants_info.dart';
import 'package:flutter_app/compents/state_page.dart';
import 'package:flutter_app/controller/girl/girl_controller.dart';
import 'package:flutter_app/page/photoview/photo-view-gallery.dart';
import 'package:flutter_app/route/routes_page.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';

class GirlsPage extends GetView<GirlController> {
  const GirlsPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.dark,
        title: Text("美女"),
        centerTitle: true,
        backgroundColor: Colors.pinkAccent,
        actions: [
          IconButton(
            icon: Obx(() => controller.isList.value
                ? Icon(Icons.view_module)
                : Icon(Icons.menu)),
            onPressed: () {
              controller.isList.value = !controller.isList.value;
            },
          )
        ],
      ),
      body: Container(
        child: _buildBodyContent(),
      ),
    );
  }

  Widget _buildBodyContent() {
    return Obx(() {
      return StatePageWithViewController<GirlController>(
          model: controller,
          onLoading: () async {
            controller.getGirls(false);
          },
          onRefresh: () async {
            controller.refresh();
          },
          onPressed: () {
            controller.initData(true);
          },
          controller: controller.refreshController,
          child: controller.isList.value
              ? ListView.builder(
                  itemBuilder: (context, index) {
                    return Card(
                      child: InkWell(
                        child: CachedNetworkImage(
                          imageUrl: controller.girls[index].imageUrl,
                          fit: BoxFit.cover,
                        ),
                        onTap: () {
                          Get.toNamed(RoutesConfig.PHOTO_VIEW, arguments: {
                            ConstantInfo.PHOTO_VIEW_LIST: controller.girls,
                            ConstantInfo.THEME_DARK: index,
                            ConstantInfo.PHOTO_VIEW_TAG: "多图",
                          });
                        },
                      ),
                      //对Widget截取的行为，比如这里 Clip.antiAlias 指抗锯齿
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      //z轴的高度，设置card的阴影
                      elevation: 5,
                    );
                  },
                  itemCount: controller.girls.length,
                )
              : StaggeredGridView.countBuilder(
                  itemCount: controller.girls.length,
                  staggeredTileBuilder: (index) {
                    //StaggeredTile的使用
                    // StaggeredTile.count：固定纵轴和主轴上的数量
                    // StaggeredTile.extent：纵轴上的数量和主轴上的最大范围
                    // StaggeredTile.fit：纵轴上的数量
                    //StaggeredTile.Count(2,index==0?2.5:3)则表示纵轴有两列并且主轴方向上第一个Tile的大小其他Tile高度的2.5比3）
                    return StaggeredTile.count(2, index.isEven ? 2 : 2.5);
                  },
                  //StaggeredGridView有几列是由crossAxisCount除以StaggeredTile设置上的纵轴的数量的结果。
                  crossAxisCount: 4,
                  itemBuilder: (context, index) {
                    var girl = controller.girls[index];
                    return Card(
                      child: InkWell(
                        child: CachedNetworkImage(
                          imageUrl: girl.imageUrl,
                          fit: BoxFit.cover,
                        ),
                        onTap: () {
                          Navigator.push(
                              context,
                              new MaterialPageRoute(
                                  builder: (context) => PhotoViewGalleryScreen(
                                    images: controller.girls,
                                    index: index,
                                    heroTag: "多图",
                                  )));
                        },
                      ),
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      elevation: 5,
                    );
                  },
                ));
    });
  }
}
